<template>
  <div>
    <!--    <el-button type="primary" @click="delrouterall()">click</el-button>-->

    <el-cascader

        style="margin-left: 10px; width: 255px"
        placeholder="请选择单位"
        ref="dwref"
        v-model="dwval"
        @change="dwchange"
        :options="dwoptions"
        :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id' }"
        clearable></el-cascader>

    <el-select style="margin-left: 20px" v-model="gx" clearable placeholder="请选择干线" filterable @change="gxchange">
      <el-option
          v-for="item in gxArr"
          :key="item.id"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>

    <el-input style="width: 200px; margin: 0 20px" placeholder="请输入井号" suffix-icon="el-icon-search"
              v-model="jh"/>

    <el-button type="primary" @click="search">搜索</el-button>
    <div>
      <el-button round icon="el-icon-warning-outline" type="danger" style="margin: 10px" @click="showbathTjConfirmForm">
        批量停机
      </el-button>
    </div>
    <!--    <el-button type="primary" @click="test">测试</el-button>-->


    <!--    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">-->
    <!--      <el-form :model="form">-->
    <!--        <el-form-item label="用户名" :label-width="formLabelWidth">-->
    <!--          <el-input v-model="form.username" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="密码" :label-width="formLabelWidth">-->
    <!--          <el-input v-model="form.password" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="角色" :label-width="formLabelWidth">-->
    <!--          <el-select v-model="form.roleid" clearable placeholder="请选择">-->
    <!--            <el-option-->
    <!--                v-for="item in roles"-->
    <!--                :key="item.roleId"-->
    <!--                :label="item.roleName"-->
    <!--                :value="item.roleId">-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="handleSave">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->


    <el-dialog width="20%" title="停机确认！" :visible.sync="stopConfirmdialogFormVisible">
      确定要 {{ stopform.jh }}井 停机吗？
      <div slot="footer" class="dialog-footer">
        <el-button @click="stopConfirmdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="stopCyj()">确 定</el-button>
      </div>
    </el-dialog>

    <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
              style="margin: 10px; width: 1600px; " border stripe :span-method="arraySpanMethod">
      <el-table-column width="50" type="selection">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="60" v-if="false">
      </el-table-column>
      <el-table-column sortable prop="jh" label="井号" width="120">
      </el-table-column>
      <el-table-column prop="ip" label="IP" width="180" v-if="false">
      </el-table-column>
      <el-table-column sortable prop="dwObj.dwname" label="所属单位" width="180">
      </el-table-column>
      <el-table-column sortable prop="gxObj.name" label="所属干线" width="180">
      </el-table-column>
      <!--      <el-table-column prop="role.roleName" label="角色" width="200">-->
      <!--      </el-table-column>-->
      <el-table-column prop="#" label="远程停机">
        <template slot-scope="scope">

          <el-button round type="danger" icon="el-icon-switch-button" @click="showConfirmForm(scope.row)">停机
          </el-button>
          <!--              <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->

          <!--          <el-popconfirm-->
          <!--              style="margin: 0 10px"-->
          <!--              confirm-button-text='确定'-->
          <!--              cancel-button-text='取消'-->
          <!--              icon="el-icon-info"-->
          <!--              icon-color="red"-->
          <!--              title="确定删除吗？"-->
          <!--              @confirm="handleDel(scope.row.id)"-->
          <!--          >-->
          <!--            <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->
          <!--          </el-popconfirm>-->

        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button round icon="el-icon-warning-outline" type="danger" style="margin: 10px" @click="showbathTjConfirmForm">
        批量停机
      </el-button>
    </div>
    <el-dialog width="20%" title="停机确认！" :visible.sync="batchstopConfirmdialogFormVisible">
      确定要批量停机吗？
      <div v-for="(item, index) in selectedRows"> {{ item.jh }}</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchstopConfirmdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchstopCyj()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="block" style="padding: 5px">

      <el-pagination
          v-if="false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <router-view/>
  </div>

</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";


export default {
  created() {
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
          } else {
            this.$message.error(response.data.message)
          }
        }, error => {
          ElementUI.Message({
            message: error.message,
            type: 'error'
          })
        }
    )
    service.get('/gx/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.gxArr = response.data.data;
          } else {
            this.$message.error(response.data.message)
          }
        }, error => {
          ElementUI.Message({
            message: error.message,
            type: 'error'
          })
        }
    )
    this.load();
  },
  data() {
    return {
      dwoptions: [],
      dwval: [],
      jh: '',
      gx: null,
      gxArr: [],
      tableData: [],
      selectedRows: [], // 用来存储选中行的数据
      pageSize: 1000,
      total: 100,
      currentPage: 1,
      dialogFormVisible: false,
      stopConfirmdialogFormVisible: false,
      batchstopConfirmdialogFormVisible: false,
      // form: {
      //   username: '',
      //   password: '',
      //   roleId: '',
      // },
      stopform: {
        id: null,
        jh: '',
        ip: '',
        dw: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    test() {
      service.get('/dj/test', {}).then(
          response => {
            if (response.data.code == 20000) {

              this.$message.success(response.data.message)
            }
          }
      )

    },

    load() {
      service.get('/dj/getlist', {
        params: {
          jh: this.jh,
          dw: this.dwval[this.dwval.length - 1],
          gx: this.gx
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
      // service.get('/dj/getpage', {
      //   params: {
      //     jh: this.jh,
      //     pagesize: this.pageSize,
      //     pagenum: this.currentPage,
      //   }
      // }).then(response => {
      //       if (response.data.code == 20000) {
      //         this.tableData = response.data.data.records;
      //         this.total = response.data.data.total;
      //         this.currentPage = response.data.data.current;
      //         this.pageSize = response.data.data.size;
      //       }
      //     },
      //     error => {
      //       ElementUI.Message({
      //         message: error.message,
      //         type: 'error'
      //       })
      //     }
      // );
    },
    dwchange(dw) {
      // console.log(dw)
      this.gx = null;
      if (dw.length > 0) {
        let dwTmp = dw[0]
        if (dw.length > 1) {
          dwTmp = dw[1]
        }
        // service.get('/gx/getlistbydw', {params: {dwid: dw[dw.length - 1]}}).then(
        service.get('/gx/getlistbydw', {params: {dwid: dwTmp}}).then(
            response => {
              if (response.data.code == 20000) {
                this.gxArr = response.data.data;
                this.load()
              } else {
                this.$message.error(response.data.message)
              }
            }, error => {
              ElementUI.Message({
                message: error.message,
                type: 'error'
              })
            }
        )
      } else {
        service.get('/gx/getAll', {}).then(
            response => {
              if (response.data.code == 20000) {
                this.gxArr = response.data.data;
                this.load()
              } else {
                this.$message.error(response.data.message)
              }
            }, error => {
              ElementUI.Message({
                message: error.message,
                type: 'error'
              })
            }
        )
        // this.gxArr = []
      }
    },

    gxchange(gxval) {
      this.load()
    },
    handleSelectionChange(selection) {
      // console.log(selection)
      // this.selectedRows = selection.map(row => row._row);
      this.selectedRows = selection
      // console.log(this.selectedRows)
    },
    batchstopCyj() {
      this.batchstopConfirmdialogFormVisible = false
      service.post('/dj/batchtj', this.selectedRows).then(response => {
            if (response.data.code == 20000) {
              this.$message.success('批量发送停机命令成功，请及时确认停机状态!');
              // this.load()
            } else {
              // this.$message.error(response.data.message)
              this.$alert(response.data.message, '批量停机错误！', {
                confirmButtonText: '确定',
                // callback: action => {
                //   this.$message({
                //     type: 'info',
                //     message: `action: ${ action }`
                //   });
                // }
              });
            }
          }, error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      )
    },

    stopCyj() {
      this.stopConfirmdialogFormVisible = false
      service.post('/dj/tj', this.stopform).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('发送停机命令成功，请及时确认停机状态!');
          // this.load()
        } else {
          this.$message.error(response.data.message)
        }
      }, error => {
        ElementUI.Message({
          message: error.message,
          type: 'error'
        })
      })
    },
    // showNewUserForm() {
    //   service.get('/role/getlist', {
    //     params: {}
    //   }).then(response => {
    //         this.roles = response.data
    //         this.form = {}
    //         this.dialogFormVisible = true
    //       },
    //       error => {
    //         ElementUI.Message({
    //           message: error.message,
    //           type: 'error'
    //         })
    //       }
    //   );
    // },
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },

    // handleSave() {
    //   service.post('/user/save', this.form).then(response => {
    //     if (response.data.code == 20000) {
    //       this.$message.success('success!');
    //       this.dialogFormVisible = false
    //       this.load()
    //     } else {
    //       this.$message.error("error")
    //       this.dialogFormVisible = false
    //     }
    //   })
    // },
    showConfirmForm(row) {
      this.id = row.id
      this.stopform.jh = row.jh
      this.stopform.ip = row.ip
      this.stopform.dw = row.dw
      this.stopConfirmdialogFormVisible = true
    },
    showbathTjConfirmForm() {
      this.batchstopConfirmdialogFormVisible = true

    },
    // handleEidt() {
    //   service.post('/user/edit', this.editform).then(response => {
    //     if (response.data.code == 20000) {
    //       this.$message.success('success!');
    //       this.editdialogFormVisible = false
    //       this.load()
    //     } else {
    //       this.$message.error("error")
    //       this.editdialogFormVisible = false
    //     }
    //   })
    // },
    // handleDel(id) {
    //   service.delete('/user?id=' + id).then(response => {
    //     this.$message.success('删除成功!');
    //     this.load()
    //   })
    // },
    search() {
      // this.currentPage = 1
      this.load()
    },
    // handleDelBatch() {
    //   console.log(this.$route)
    // },
    arraySpanMethod({row, column, rowIndex, columnIndex}) {

    }
  }
}
</script>

<style scoped>

</style>